<template>
  <div>
    <h1>情况五：监视上述的多个数据（只监视人的名字和第一台车）</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>汽车：{{ person.car.c1 }},{{ person.car.c2 }}</h2>
    <button @click="updateName">修改姓名</button>
    <button @click="updateAge">修改年龄</button>
    <button @click="updateC1">修改第一台车</button>
    <button @click="updateC2">修改第二台车</button>
    <button @click="updateCar">修改整个车</button>
  </div>
</template>

<script setup lang="ts">
  import { reactive, watch } from 'vue';

  let person = reactive({
    name: '张三',
    age: 18,
    car: {
      c1: '奔驰',
      c2: '宝马'
    }
  });

  function updateName() {
    person.name += '~';
  }
  function updateAge() {
    person.age += 1;
  }
  function updateC1() {
    person.car.c1 = '奥迪';
  }
  function updateC2() {
    person.car.c2 = '大众';
  }
  function updateCar() {
    person.car = { c1: '雅迪', c2: '爱玛' };
  }

  // 情况五：监视上述的多个数据（只监视人的名字和第一台车）
  watch(
    [() => person.name, () => person.car.c1],
    (newValue, oldValue) => {
      console.log('person.car发送变化', newValue, oldValue);
    },
    { deep: true }
  );
</script>

<style scoped></style>
